import styled from 'styled-components';
import React, { CSSProperties, useState, useCallback, useEffect, useRef, ReactNode } from 'react';
import {
    RiCursorLine,
    RiFunctionAddLine,
    RiHand,
    RiStickyNoteAddLine,
    RiAddCircleFill,
} from '@remixicon/react';
import { Modal, Divider, Button } from 'antd';

import { Toolbar } from './ui';
import {
    useStore,
    useWorkflowStore,
} from '../store'
import { ControlMode } from '../types';

export const CanvasToolbar = () => {
    const [action, setAction] = useState<string>('');

    const controlMode = useStore(s => s.controlMode)

    const setControlMode = useStore(s => s.setControlMode)

    const iconStyle: CSSProperties = {
        width: '16px', height: '16px'
    };

    return <Container>
        <Button
            type={'text'}
            icon={<RiAddCircleFill style={iconStyle} />}
            onClick={async () => {
            }}>
        </Button>
        <Divider type={'vertical'} style={{ height: '100%' }} />
        <Button
            style={{ color: controlMode === ControlMode.Pointer ? '#0091FF' : '#667085' }}
            type={'text'}
            icon={<RiCursorLine style={iconStyle} />}
            disabled={false}
            onClick={async () => {
                setControlMode(ControlMode.Pointer)
            }}>
        </Button>
        <Button
            style={{ color: controlMode === ControlMode.Hand ? '#0091FF' : '#667085' }}
            type={'text'}
            icon={<RiHand style={iconStyle} />}
            disabled={false}
            onClick={async () => {
                setControlMode(ControlMode.Hand)
            }}>
        </Button>
        <Divider type={'vertical'} style={{ height: '100%' }} />
        <Button
            style={{ color: false ? '#0091FF' : '#667085' }}
            type={'text'}
            icon={<RiFunctionAddLine style={iconStyle} />}
            disabled={false}
            onClick={async () => {
            }}>
        </Button>
    </Container>
}


const Container = styled.div`
    height: 30px;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
    gap:2px;
`;
